html {
    height: 100%;
}

body {
    margin        : 0;
    padding       : 0;
    height        : 100%;
    display       : flex;
    flex-direction: column;
}

/* 头部 */
#header {
    background-color: rgb(255, 132, 29);
    height          : 1.066667rem;
    display         : flex;
    justify-content : space-between;
    align-items     : center;
}

#header .header-logo a {
    display: block;
}

#header .header-logo a img {
    width : 5rem;
    height: 0.7rem;
}

#header .header-app a img {
    width : 1rem;
    height: 1.066667rem;
}

/* 搜索 */
#search {
    height         : 1rem;
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    border-bottom  : rgb(241, 241, 241) 0.056667rem solid;
}

#search span {
    height: 1rem;
}

#search .search-input input {
    width           : 7.2rem;
    height          : 0.8rem;
    background-color: rgb(241, 241, 241);
    border-radius   : 0.266667rem;
    border          : 0;
    text-indent     : 0.266667rem;
    outline         : none;
}

#search .search-button button {
    width           : 1.6rem;
    height          : 0.8rem;
    border-radius   : 0.266667rem;
    background-color: rgb(255, 132, 29);
    border          : 0;
    color           : #fff;
}

/* 导航 */
#shopNav {
    display    : flex;
    align-items: center;
    height     : 0.8rem;
    background : linear-gradient(to bottom, #fff 0%, rgb(241, 241, 241) 100%);
    position   : relative;
}

#shopNav a {
    display        : block;
    text-decoration: none;
    color          : grey;
    font           : 0.6rem / 0.8rem;
}

#shopNav span {
    height       : .7rem;
    width        : 1.3rem;
    background   : linear-gradient(to top, #fff 0%, grey 100%);
    font         : .35rem/.7rem '';
    text-align   : center;
    border-radius: .166667rem;
    position     : absolute;
    right        : .266667rem;
}

/* 商品推荐 */
#recommen {
    flex    : 1;
    overflow: auto;
}

#recommen .recommen-main .recommen-img .recImg {
    margin    : 0;
    padding   : 0;
    list-style: none;
    /* height : 13.333333rem; */
}

#recommen .recommen-main .recommen-img .recImg li{
    padding: 0  .333333rem;
}
#recommen .recommen-main .recommen-img .recImg li:nth-of-type(1) img {
    display: block;
    width  : 5.5rem;
    margin : 0 auto;
}

#recommen .recommen-main .recommen-img .recImg li:nth-of-type(2) {
    font: .426667rem/.7rem '';
}

#recommen .recommen-main .recommen-img .recImg li:nth-of-type(3) span{
    display: inline-block;
    margin-right: .833333rem;
    font: .366667rem/.7rem '';
    color: gray;
}
#recommen .recommen-main .recommen-img .recImg li:nth-of-type(4) a{
    text-decoration: none;
    color: gray;
}


#recommen .recommen-main .comment {
    margin    : .266667rem 0;
    background: rgb(241, 241, 241);
    font      : .426667rem/.8rem '';
    text-align: center;
    height    : .8rem;
}


#recommen .recommen-main .recommen-main-content {
    /* overflow: auto; */
    display       : flex;
    flex-direction: column;
    margin-bottom : 0.266667rem;
}

#recommen .recommen-main .recommen-main-content .commentList {
    margin    : 0;
    padding   : 0;
    list-style: none;
    border-bottom: rgb(241, 241, 241) .053333rem solid;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
#recommen .recommen-main .recommen-main-content .commentList:last-child{
    border: 0;
}

#recommen .recommen-main .recommen-main-content .commentList li{
    margin: .266667rem .153333rem;
    font: .326667rem/.555rem '';
}
#recommen .recommen-main .recommen-main-content .commentList li:nth-of-type(1){
    display: flex;
    justify-content: space-between;
}
#recommen .recommen-main .recommen-main-content .commentList li:nth-of-type(3){
    display: flex;
    justify-content: flex-end;
}

#recommen .recommen-buttom {
    height          : 1.2rem;
    background-color: rgb(241, 241, 241);
    display         : flex;
    justify-content : center;
    align-items     : center;
}

#recommen .recommen-buttom a {
    height          : 0.8rem;
    width           : 9rem;
    display         : block;
    background-color: #fff;
    text-decoration : none;
    border-radius   : 0.266667rem;
}

#recommen .recommen-buttom a span {
    font      : 0.426667rem/0.8rem "";
    display   : block;
    text-align: center;
    color     : gray;
}

/* 底部 */
#footer {
    height          : 2.7rem;
    display         : flex;
    flex-direction  : column;
    justify-content : space-between;
    background-color: rgb(241, 241, 241);
}

#footer .footer-top {
    height          : 0.7rem;
    background-color: rgb(255, 132, 29);
}

#footer .footer-top p {
    margin         : 0;
    display        : flex;
    justify-content: space-between;
}

#footer .footer-top p span {
    display: block;
    color  : #fff;
    font   : 0.4rem/0.7rem "";
}

#footer .footer-main {
    height         : 1rem;
    display        : flex;
    justify-content: space-between;
    margin-top     : 0.4rem;
}

#footer .footer-main>span {
    height    : 0.8rem;
    display   : block;
    font      : 0.4rem/0.8rem "";
    text-align: center;
    flex      : 1;
    border    : 1px solid gray;
}

#footer .footer-main span:nth-of-type(2) {
    border-left : 0;
    border-right: 0;
}

#footer .footer-main span:nth-of-type(1) {
    border-left: 0;
}

#footer .footer-main span:nth-of-type(3) {
    border-right: 0;
}

#footer .footer-buttom {
    height         : 0.7rem;
    display        : flex;
    justify-content: center;
    align-items    : center;
    flex-wrap      : wrap;
    flex-direction : column;
}

#footer .footer-buttom p {
    margin: 0;
}

#footer .footer-buttom p:nth-of-type(1) {
    display: flex;
}

#footer .footer-buttom p:nth-of-type(2) {
    font: 0.2rem/0.3rem "";
}

#footer .footer-buttom p:nth-of-type(1) span {
    display: block;
    font   : 0.3rem/0.4rem "";
}

#footer .footer-buttom p:nth-of-type(1) span:nth-of-type(1) {
    color: red;
}

#footer .footer-buttom p:nth-of-type(1) span:nth-of-type(2) {
    color: black;
}

#footer .footer-buttom p:nth-of-type(1) span:nth-of-type(3) {
    color: yellow;
}